<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>cssTen2</title>
</head>
<style>

  *{
    margin: 0;
    padding: 0;
  }
  .clearfix::before,
  .clearfix::after{
    content: '';
    display: table;
  }
  .clearfix::after{
    clear: both;
  }
  .one{
    background-color: deepskyblue;
    width: 300px;
    height: 300px;
    cursor: pointer; /*手指类型*/
    cursor: text; /*工字型类型*/
    cursor: move; /*可以移动类型*/
    cursor: default; /*默认类型*/
  }
  .two{
    background-color: deepskyblue;
    width: 300px;
    height: 300px;

   border-radius: 10px 50px 60px 80px;
   border-radius: 10px 50px 60px ;
   border-radius: 10px 50px ;
    border-radius: 10px; /*四个圆角都是10px*/   /*10px是半径为10的圆角*/
  }

.three{
  background-color: orange;
  width: 100px;
  height: 100px;
  border-radius: 50%; /*制作圆形*/
}
  .three1{
    background-color: orange;
    width: 100px;
    height: 30px;
    border-radius: 30px; /*制作圆形*/
  }

  .four{
    background-color: orange;
    width: 100px;
    height: 100px;
    overflow: auto; /*溢出部分自动的显示滚动条*/
    overflow: scroll; /*无论是否溢出都会加上滚动条*/
    overflow: hidden; /*溢出部分会隐藏起来*/
    overflow: visible; /*默认的，溢出部分会显示*/
  }
  .five{
    /*display: none; *//*不占位隐藏*/
    visibility: hidden;   /*占位隐藏*/
    background-color: orange;
    width: 100px;
    height: 100px;
  }
  .five1{
    display: none; /*不占位隐藏*/
   /* visibility: hidden;   *//*占位隐藏*/
    background-color: orange;
    width: 100px;
    height: 100px;
  }
  .five2{
    /*display: none; *//*不占位隐藏*/
    /* visibility: hidden;   *//*占位隐藏*/
    background-color: orange;
    width: 100px;
    height: 100px;
    opacity: 0.5;
  }
  .six{
    color: orange;
    width: 400px;
    height: 300px;
    background-color: deepskyblue;
    background-image: url(1.jpg);
    background-repeat: no-repeat;
    background-size: 100px 100px;
    background-size: 50%;  /*是背景颜色的一半*/
    background-size: contain; /*是背景颜色包含背景图，背景颜色多的会露出来*/
    background-size: cover;  /*是背景颜色被背景图给覆盖了，因为背景图片是成正比例放大的，所以背景图多的部分会消失*/
    text-align: center;  /*文本水平居中*/
  }
  .seven{
    background-color: orange;
    width: 100px;
    height: 100px;

  /*  box-shadow: 水平偏移量  垂直偏移量  模糊度  可选阴影扩大 阴影颜色 内部阴影(inset) ;*/
    /*box-shadow: 水平偏移量  垂直偏移量  模糊度  可选阴影扩大 阴影颜色 ;*//*默认是外部阴影*/
    /*box-shadow: 水平偏移量  垂直偏移量  blur  spread color inset ;*//*默认是外部阴影*/
    box-shadow:-5px 18px 5px 13px green;
  }

</style>
<body>
<div class="clearfix"></div>
<div class="one">光标类型:属性名cursor</div>
<div class="two">圆角边框:border-radius:左上 右上 右下 左下 ，是从左上顺时针执行，没有的看对面</div>
<div class="three ">制作圆形</div>
<div class="three1">制作胶囊</div>
<div class="four">溢出显示效果</div>
<div class="five">显示隐藏的基本使用</div>
<div class="five1">two</div>
<div class="five2">three</div>
<div class="five2">透明属性:opacity</div>
<div class="six">背景缩放图: background-size:</div>
<div class="seven">盒子阴影</div>
<div class="seven">盒子阴影</div>
</body>
</html>
